const Vue = require('vue')
const express = require('express')
const fs = require('fs')
const {createBundleRenderer} = require('vue-server-renderer')
const setupDevServer = require('./build/setup-dev-server')


const server = express()

//处理的是物理磁盘中的资源
server.use('/dist',express.static('./dist'))

const isProd = process.env.NODE_ENV === 'production'
let renderer
//返回一个promise变量onready
let onReady
if(isProd){
    const serverBundle = require('./dist/vue-ssr-server-bundle.json')
    const template = fs.readFileSync('./index.template.html','utf-8')
    const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createBundleRenderer(serverBundle,{
        template,
        clientManifest
    }) 
}else{
    //开发模式 -> 监视打包构建 ->重新生成renderer渲染
    onReady = setupDevServer(server,(serverBundle, template, clientManifest)=>{
        renderer = createBundleRenderer(serverBundle,{
            template,
            clientManifest
        })  
    })
}

const render = async (req,res)=>{

    try{
        const html =  await renderer.renderToString({
            title:'拉钩教育1',
            meta:`<meta name="description" content="拉钩教育">`,
            url:req.url
        })
        //处理乱码
        res.setHeader('Content-Type','text/html;charset=utf8')
        res.end(html)
    }catch(err){
        res.status(500).end('internal server error')
    }
}

//服务端路由设置为*
server.get('*',isProd
    ?render
    :async (req, res) => {
        //等待有了renderer渲染器后，调用render进行渲染
        await onReady
        render(req, res)
    })

server.listen(3000, ()=>{
    console.log('server running at 3000')
})
